<template>
  <div>
    <p>clicked {{count}} times,count is {{evenOrOdd}}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">increment if odd</button>
    <button @click="incrementAsync">increment async</button>
  </div>
</template>

<script>
  import {mapState, mapMutations, mapActions, mapGetters} from 'vuex'
  export default {
    mounted() {
      console.log(this.$store)
    },
    computed: {
      ...mapState(['count']), // {'count'() {return this.$store.state.count}}
      ...mapGetters(['evenOrOdd'])
    },
    methods: {
      // increment() {
      //   this.$store.commit('INCREMENT')
      // },
      // decrement() {
      //   this.$store.commit('DECREMENT')
      // },
      // incrementOdd() {
      //   this.$store.dispatch('incrementOdd')
      // },
      // incrementAsync() {
      //   this.$store.dispatch('incrementAsync')
      // }
      ...mapMutations({
        increment: 'INCREMENT',
        decrement: 'DECREMENT'
      }), // 如果方法名和commit('xxx')不一致,需要用对象{}
      ...mapActions(['incrementOdd', 'incrementAsync'])
    }
  }
</script>

<style scoped>
</style>